import React, { useState, useEffect, useCallback } from 'react';
import { getSysDepartmentFindList, getSysUserSelected } from '../../../../../../Api/listUrl';
import {
    putAccAmoebaChanceInsertAmoebaChance,
    postAccAmoebaChanceUpdateAmoebaChance,
    getAccAmoebaChanceUpdateShow
} from '../../../../financialApi';
import { CostNature } from '../../../enum'
import { Modal, Form, Select, Row, Col, message, Button, DatePicker, Input } from 'antd';
import moment from 'moment';
const { Option } = Select;

/**
 * @description: 内部交易 -- 机会成本分配单 -- 填报
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-26） 创建
 */

const AddOpportunityCostModule = ({ addOpportunityCostModuleShow, setAddOpportunityCostModuleShow, clickId, setClickId, listFun }) => {
    const [form] = Form.useForm();
    const { validateFields, resetFields, setFieldsValue } = form;
    const [buttonLoading, setButtonLoading] = useState(false);
    const [departmentList, setDepartmentList] = useState([]); //领用部门
    const [userList, setUserList] = useState([]); //人员list
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected();
                if (code === '20000') {
                    setUserList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const departmentFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysDepartmentFindList();
                if (code === '20000') {
                    setDepartmentList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    useEffect(() => {
        departmentFun();
        userFun();
        if (clickId) {
            ; (async () => {
                const { code, msg, data } = await getAccAmoebaChanceUpdateShow({ id: clickId });
                if (code === '20000') {
                    data.happenDate = moment(data.happenDate);
                    setFieldsValue(data)
                } else {
                    message.error(msg);
                }
            })()
        }
    }, [departmentFun, clickId, setFieldsValue, userFun])
    const handleOk = () => {
        validateFields().then(values => {
            values.happenDate = moment(values.happenDate).format("YYYY-MM-DD");
            setButtonLoading(true);
            if (clickId) {
                values.id = clickId;
                ; (async () => {
                    const { code, msg } = await postAccAmoebaChanceUpdateAmoebaChance(values);
                    if (code === '20000') {
                        message.success('编辑成功！');
                        setClickId(undefined);
                        listFun();
                        resetFields();
                        setButtonLoading(false);
                        setAddOpportunityCostModuleShow(false);
                    } else {
                        message.error(msg);
                    }
                })();
            } else {
                ; (async () => {
                    const { code, msg } = await putAccAmoebaChanceInsertAmoebaChance(values);
                    if (code === '20000') {
                        message.success('添加成功！');
                        listFun();
                        resetFields();
                        setButtonLoading(false);
                        setAddOpportunityCostModuleShow(false);
                    } else {
                        message.error(msg);
                    }
                })();
            }
        })

    };

    const handleCancel = () => {
        setClickId(undefined);
        resetFields();
        setButtonLoading(false);
        setAddOpportunityCostModuleShow(false);
    };
    return <Modal
        width={800}
        title={clickId ? "编辑" : "填报"}
        visible={addOpportunityCostModuleShow}
        onCancel={handleCancel}
        bodyStyle={{ padding: '25px 63px' }}
        footer={[
            <Button style={{
                width: '88px',
                height: '34px',
            }} key="back" onClick={handleCancel}>
                取消
            </Button>,
            <Button key="submit" style={{
                width: '88px',
                height: '34px',
            }} type="primary" loading={buttonLoading} onClick={handleOk}>
                确定
            </Button>
        ]}
    >
        <Form form={form}>
            <Row>
                <Col span={12}>
                    <Form.Item
                        label="发生时间"
                        name="happenDate"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择发生时间!',
                            },
                        ]}
                    >
                        <DatePicker style={{ width: '100%' }} />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="成本事由"
                        name="reason"
                        wrapperCol={{ span: 15 }}
                        rules={[{ required: true, message: '请输入成本事由!', }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="成本性质"
                        name="nature"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择成本事由!',
                            },
                        ]}
                    >
                        <Select style={{ width: '100%' }} placeholder='请选择'>
                            {
                                CostNature.map((item, index) => <Option value={index} key={item + index}>{item}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="成本金额"
                        name="money"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入出库金额!',
                            },
                            {
                                required: true,
                                pattern: new RegExp(/^[1-9]\d*$/, "g"),
                                message: '请输入正确的成本金额'
                            },
                        ]}
                    >
                        <Input suffix="元" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="承担部门"
                        name="assumeDep"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择承担部门!',
                            },
                        ]}
                    >
                        <Select style={{ width: '100%' }} placeholder='请选择'>
                            {
                                departmentList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="承担人员"
                        name="assumeMain"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择承担人员!',
                            },
                        ]}
                    >
                        <Select style={{ width: '100%' }} placeholder='请选择'>
                            {
                                userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    </Modal>
}

export default AddOpportunityCostModule;